<template>
<!-- 根据主菜清单循环渲染菜品组件 -->
<Dish 
    v-for="value,key in MainDishes"
    :name="key"
    :price="value.prices"
    type="mainDish"
    :options="getOptions(value)"
    :picture="picturePath"
/>
<!-- “自选四拼煲”菜品组件 -->
<Dish
    name="自选四拼煲"
    :price="16"
    :options="[tastes,SideDishes]"
    :picture="picturePath"
    type="DIY"
/>
</template>

<script lang="ts" setup>
//导入菜品组件
import Dish from './common/Dish.vue';
//导入主菜菜单和配菜菜单
import {MainDishes,SideDishes} from '../static/menu.json';
//导入图片路径
import picturePath from '../static/stew.png';
//设置配菜
const sideDishes:string[]=['土豆','大白菜','豆棍','豆芽'];
interface DishRemark{
    [index:string]:number
}
interface DishOptionInfo{
    sizes:number,
    prices:number|number[],
    remark:DishRemark|null
}
interface DishOptions{
    [index:string]:string[]|number
}
//定义口味列表
const tastes:string[]=['不辣','微辣','中辣','特辣'];
//定义解析菜品选项的函数
function getOptions(value:DishOptionInfo):DishOptions{
    const options={} as DishOptions;
    switch(value.sizes){
        case 3:
            options['规格']=['小','中','大'];
            break;
        case 2:
            options['规格']=['小','大'];
            break;
        default:
            break;
    }
    Object.assign(options,
        {
            '口味':tastes,
            '配菜1':sideDishes,
            '配菜2':sideDishes,
            ...value.remark
        }
    );
    return options;
}
</script>

<style lang="scss" scoped>
</style>
